<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<script type="text/javascript" src="${rctx}/basejs/jquery.cycle.min.js"></script>
<script type="text/javascript" src="${rctx}/basejs/jquery.cycle.setup.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
	//screen_height = window.outerHeight;
	screen_height = $(document).height() + 40;
	/** 子窗口中使用jquery 获取父窗口的元素**/
	$("#content",window.parent.document).css("height", screen_height + "px");
}
</script>
<%
	if (request.getAttribute("view_cop") == null) {System.out.println("view_cop == null"); return;}
	List<Map<String, Object>>list = (List<Map<String, Object>>)request.getAttribute("view_cop");	
%>
</head>
<body>
	<div class="wrapper col2">	
		<div id="featured_slide">
		<%for (Map<String, Object> map : list) { %>
			<div id="<%=map.get("component_id") %>" class="featured_box">
				<a href=""> 
				<img src="<%=map.get("image_url") %>" alt=""/>
				<%-- <img src="${ctx}/images/images_index/wallpaper-1.jpg" alt=""/> --%><!-- image 450X300 -->
				</a>
				<div class="floater">
					<h2><%=map.get("title") %></h2>
					<p>
						<%=map.get("discription") %>
					</p>
					<p class="readmore">
						<a href="#">Continue Reading &raquo;</a>
					</p>
				</div>
			</div>
		<%} %>
	<%-- 		<div class="featured_box">
				<a href=""><img src="${ctx}/images/images_index/wallpaper-2.jpg" alt="" /></a>
				<div class="floater">
					<h2>2. My Favorite Movie</h2>
					<p>V for Vendetta is a ten-issue comic book series written by Alan Moore and illustrated mostly by David Lloyd, 
					set in a dystopian future United Kingdom imagined from the 1980s to about the 1990s. 
					A mysterious masked revolutionary who calls himself "V" works to destroy the totalitarian government, profoundly affecting the people he encounters.
					 Warner Bros. released a film adaptation of V for Vendetta in 2006.</p>
					<p class="readmore">
						<a href="#">Continue Reading &raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="${ctx}/images/images_index/wallpaper-3.bmp" alt="" /></a>
				<div class="floater">
					<h2>3. The Song</h2>
					<p>The band is best known for its three hit singles: Grammy Award-winning "We Are Young" (featuring Janelle Monáe), "Some Nights", and "Carry On".
					 "We Are Young" reached number one on the U.S. Billboard Hot 100 and Digital Songs charts.
					  It also peaked at number one in the United Kingdom.
					 </p>
					<p class="readmore">
						<a href="#">Continue Reading &raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="${ctx}/images/images_index/wallpaper-4.jpg" alt="" /></a>
				<div class="floater">
					<h2>4. Reading day after day</h2>
					<p>The Social Animal is an APA-medal winning book about social psychology by Elliot Aronson. 
					Originally written in 1972, The Social Animal is currently in its eleventh edition and is arguably psychology's most engaging and most enduring textbooks.
					In a style written for the general audience, the book covers what modern psychology knows about the reasons for some of the most important aspects of human behavior.</p>
					<p class="readmore">
						<a href="#">Continue Reading &raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="${ctx}/images/images_index/wallpaper-5.jpg" alt="" /></a>
				<div class="floater">
					<h2>5. Romance in Reality</h2>
					<p> Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 Null Null Null Null Null Null Null Null Null Null Null Null
					 </p>
					<p class="readmore">
						<a href="#">Continue Reading &raquo;</a>
					</p>
				</div>
			</div> --%>
		</div>
	</div>

	<!-- ####################################################################################################### -->
	<div class="wrapper col3">
		<div id="homecontent">
			<div class="fl_left">
				<div class="column2">
					<ul>
						<li>
							<h2>Lost</h2>
							<div class="imgholder">
								<img src="${rctx}/TED.jpg" alt="" />
							</div>
							<p>Ideas Worth Spreading</p>
							<p class="readmore">
								<a href="http://www.ted.com/">Continue Reading &raquo;</a>
							</p>
						</li>
						<li class="last">
							<h2>Lost</h2>
							<div class="imgholder">
								<img src="${rctx}/flower.png" alt="" />
							</div>
							<p>丽格海棠 Rieger Beginia</p>
							<p>丽格海棠的英文名（Rieger begonias）是以德国人Otto Rieger先生的名字命名的一个秋海棠杂种群（elatior and rieger begonia hybrids），
							是用冬季开花的索科秋海棠（B．socotrana）与许多种球根类秋海棠杂交得出的一群冬季开花的杂交品种。</p>
							<p class="readmore">
								<a href="http://baike.baidu.com/view/108778.htm">Continue Reading &raquo;</a>
							</p>
						</li>
					</ul>
					<br class="clear" />
				</div>
				<div class="column2">
					<h2>About Me</h2>
					<img class="imgl" src="${rctx}/me.png" alt="" />
					<p>
						My name is hunk,
						That's all.
						You can follow me in sina weibo <a href="http://weibo.com/u/2028914940" title="">Hunk_D</a>.
					</p>
					<p>Who is but the form following the function of what And what I am is a man with a simple name</p>
				</div>
			</div>
			<div class="fl_right">
				<h2>Latest Information From Me</h2>
				<ul>
					<li>
						<div class="imgholder">
							<a href="#"><img src="${rctx}/8080.png" alt="" /></a>
						</div>
						<p>
							<strong><a href="#">哎这次更新有点偷懒啊</a></strong>
						</p>
						<p>
						工作太忙了，到现在都没有写完后台，不过也完成了一部分了，这次的更新大部分是后台的更新...好吧5%的后台功能更新...。
						这次的更新也会持续一段时间，因为实在是更新的太少了，正好5月1日放假补两个晚上差不多可以把40%的后台功能做掉。
						</p>
					</li>
					<li>
						<div class="imgholder">
							<a href="#"><img src="${rctx}/8080.png" alt="" /></a>
						</div>
						<p>
							<strong><a href="#">Sleeping...Zzz</a></strong>
						</p>
						<p>zZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ 
						ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzz
						zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz</p>
					</li>
					<li>
						<div class="imgholder">
							<a href="#"><img src="${rctx}/8080.png" alt="" /></a>
						</div>
						<p>
							<strong><a href="#">Sleeping...Zzz</a></strong>
						</p>
						<p>zZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ 
						ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzz
						zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz</p>
					</li>
					<li>
						<div class="imgholder">
							<a href="#"><img src="${rctx}/8080.png" alt="" /></a>
						</div>
						<p>
							<strong><a href="#">Sleeping...Zzz</a></strong>
						</p>
						<p>zZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ 
						ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzz
						zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz</p>
					</li>
					<li class="last">
						<div class="imgholder">
							<a href="#"><img src="${rctx}/8080.png" alt="" /></a>
						</div>
						<p>
							<strong><a href="#">Sleeping...Zzz</a></strong>
						</p>
						<p>zZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ 
						ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz zZz Zzz zzZ ZZz ZZZ zzz
						zZz Zzz zzZ ZZz ZZZ zzzzZz Zzz zzZ ZZz ZZZ zzz</p>
					</li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
</body>
</html>